<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="../font_图标/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="../css/zhanghuxx.css"/>
		<title></title>
	</head>
	<body>
		<!--头部-->
		<header>
			<ul>
				<li><a href="#" onClick="javascript:history.back(-1)"><i class="icon iconfont icon-qiehuanqizuo"></i></a></li>
				<li><a href="javascript:;" class="share">账户信息<i class="icon iconfont icon-sanjiao1"></i></a></li>
				<li></li>
			</ul>
		</header>
		<!--内容-->
		<div class="contes">
			<ul>
				<li>
					<p>闪注账户</p>
					<p>剩余量:<span>9500</span>条</p>
				</li>
				<li>
					<p>短信账户</p>
					<p>剩余量:<span>865</span>条</p>
				</li>
			</ul>
		</div>
		<!--空-->
		<div class="kong"></div>
		<!--我的充值-->
		<div class="mycz">
			<ul>
				<li><p><span>￥</span>我的充值</p></li>
				<li><p><a href="chongzhijilu.html">查看明细<i class="icon iconfont icon-qiehuanqiyou"></i></a> </p></li>
			</ul>
		</div>
		<div class="czl">
			<ul>
				<li>
					<p>闪注充值量</p>
					<p><span>20000</span>条</p>
				</li>
				<li>
					<p>短信充值量</p>
					<p><span>5000</span>条</p>
				</li>
			</ul>
		</div>
		<!--空-->
		<div class="qing"></div>
		<!--我的消费-->
		<div class="mycz">
			<ul>
				<li><p><span>-</span>我的消费</p></li>
				<li><p><a href="xiaofeixq.html">查看明细<i class="icon iconfont icon-qiehuanqiyou"></i></a> </p></li>
			</ul>
		</div>
		<div class="czl">
			<ul>
				<li>
					<p>闪注充值量</p>
					<p><span>16825</span>条</p>
				</li>
				<li>
					<p>短信充值量</p>
					<p><span>1548</span>条</p>
				</li>
			</ul>
		</div>
		<div class="alert_bg">
			<div><button>全部账户</button></div>
			<ul>
				<li><button><a href="index.html">天天消消乐</a></button></li>
				<li><button>大话西游</button></li>
				<li><button>王者荣耀</button></li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		//字体大小
		(function(win,doc){
			//浏览器缩放时
			win.onresize=function(){
				change();	
			};
			change();
			function change(){
				var oFs=doc.documentElement.clientWidth/(320/20);
		
				//设置根目录字体大小
				doc.documentElement.style.fontSize=oFs+'px';	
			}	
		})(window,document);
		
		
		var shareBtn = document.querySelector('.share');
		var alertView = document.querySelector('.alert_bg');
		var aDiv=document.querySelector('.alert_bg div');
		var aLi = document.querySelectorAll('.alert_bg ul li');
		
		shareBtn.onclick = function(){
			alertView.style.display = 'block';
		}
		
		for(var i = 0; i < aLi.length; i++){
			aLi[i].onclick = function(){
				alertView.style.display = 'none';
			}
		}
		aDiv.onclick=function(){
			alertView.style.display = 'none';
		}
	</script>
</html>
